<template>
    <div>
        <MyHeader title="购物车" :trr="list" />
        <div style="padding:45px 0 50px;">
            <MyGoods v-for="item in list" :key="item.id" :goodsObj="item" />
        </div>
        <MyFooter :arr="list" />
    </div>
</template>

<script>
    import MyHeader from './components/MyHeader.vue'
    import MyGoods from './components/MyGoods.vue'
    import MyFooter from './components/MyFooter.vue'

    /**
     * 目标：商品列表渲染
     * 1. 把数据保存到data变量中
     * 2. v-for变量MyGoods组件 传入每个商品对象（父传子）
     * 3. MyGoods接收父传入的数据，并把对象相应的属性展示在指定标签位置
     * 4. MyGoods把父给的商品对象，再次传给MyCount，把goods_count属性与input双向绑定
     * 5. 样式 - 中间的盒子 加个上下padding，padding: 45px 0 50px
     */
    export default {
        data() {
            return {
                list: []
            }
        },
        components: {
            MyHeader,
            MyGoods,
            MyFooter
        },
        // 组件创建后 - 立即发送网络请求
        created() {
            this.$axios({
                method: 'GET',
                url: '/api/cart '
            }).then(resp => {
                // console.log(resp.data)
                this.list = resp.data.list
            }).catch(e => {
                console.error(e)
            })
        }
    }
</script>

<style>

</style>